<template>
  <div style="width:1200px; margin:0 auto">
    <Header></Header>

    <div>
      <el-container>
        <el-aside width="600">
          <img :src="book.picture" width="400" height="360">
        </el-aside>
        <el-main>
          <h1>{{book.name}}</h1>
          <div>{{book.subtitle}}</div>
          <h4>作者：{{book.author}}</h4>
          <h4>出版社：{{book.publishingHouse}} </h4>
          <h4>出版时间：{{book.publishedDate.substring(0, book.publishedDate.indexOf(' '))}}</h4>
          <div style="background-color: snow; width: 200px; height: auto" >
            <div style="color:#F00;font-size:32px">¥{{(book.price * 0.01).toFixed(2)}}
              <span style="color:#909399;font-size:12px">定价：<span style="text-decoration:line-through">{{(book.orignPrice * 0.01).toFixed(2) }}</span></span></div>
          </div>
          <br>
          <el-button type="danger" icon="el-icon-shopping-cart-full" @click="addCart">加入购物车</el-button>
        </el-main>
      </el-container>
      <el-tabs value="first">
        <el-tab-pane label="商品详情" name="first">
          <template>
            <span><h3>推荐语</h3></span>
            <mavon-editor
              class="md"
              :value="book.bookDetail.recommendation"
              :subfield = "false"
              :defaultOpen = "'preview'"
              :toolbarsFlag = "false"
              :editable="false"
              :scrollStyle="true"
              :ishljs = "true"></mavon-editor>
            <span><h3>简介</h3></span>
            <mavon-editor
              class="md"
              :value="book.bookDetail.content"
              :subfield = "false"
              :defaultOpen = "'preview'"
              :toolbarsFlag = "false"
              :editable="false"
              :scrollStyle="true"
              :ishljs = "true"></mavon-editor>
            <span><h3>作者介绍</h3></span>
            <mavon-editor
              class="md"
              :value="book.bookDetail.authorIntroduction"
              :subfield = "false"
              :defaultOpen = "'preview'"
              :toolbarsFlag = "false"
              :editable="false"
              :scrollStyle="true"
              :ishljs = "true"></mavon-editor>
          </template>

        </el-tab-pane>
        <el-tab-pane label="商品评论" name="second">
          <div  v-for="review in searchResult" :key="review">
          <el-row>
              <el-col :span="20">
                <br>
                <div style="color: #475669">
                  {{review.content}}
                </div>
                <br>
                <div style="color:#909399;font-size:14px">{{review.createDate}}</div>
              </el-col>
              <el-col :span="4">
                <div style="margin-left: 60px">
                  <br>
                  <img src="comment_user.jpg" style="width: 40px; height: 40px">
                  <div>{{review.user.username}}</div>
                </div>
              </el-col>
          </el-row>
            <br>
            <hr color="#f0f2f5">
          </div>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>
  import Footer from '@/components/Footer'
  import Header from '@/components/Header'
  import bookApi from '@/api/book'
  import reviewApi from '@/api/review'

  export default {
    components: {
      Footer,
      Header
    },
    data() {
      return {
        book: '',
        currentPage: 1,
        searchResult: [],
        total: 0,
        searchMap: {}
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        bookApi.findById(this.$route.params.id).then(response => {
          this.book = response.data
          this.searchMap.bookId = this.book.id
          this.fetchCommentData()
        })
      },
      addCart() {
        this.$store.commit('addCart', {
          id: this.book.id,
          name: this.book.name,
          picture: this.book.picture,
          price: this.book.price
        })
        this.$message({
          showClose: true,
          message: '加入购物车成功',
          type: 'success'
        })
      },
      fetchCommentData() {
        reviewApi.search(this.currentPage, 10, this.searchMap).then(response => {
          this.searchResult = response.data.rows
          this.total = response.data.total
        })
      },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage
        this.fetchCommentData()
      }
    }
  }
</script>

<style scoped>

</style>
